<!-- 解谜页面，第二个tarbar -->
<template>

	<view class="body">

		<!--search start-->
		<view class="search">
			<uni-section title="搜索框" type="line">
				<uni-search-bar placeholder="阅读,解密,找搭子..." @confirm="search" v-model="searchValue" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear">
				</uni-search-bar>


			</uni-section>

		</view>
		<!--search end-->


		<!--轮播图展示start-->
		<view class="uni-margin-wrap gray">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in activityShow" :key="index">
					<view class="swiper-item ">
						<image :src="item.imgUrl" mode="aspectFit"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<!--轮播图展示end-->

		<!--我想解密 || 我想出题 start-->
		<view class="pazel-get-set">
			<view class="blank"></view>
			<image src="../../static/jiemi.jpg" class="pazel-pic" @click="toSolvePuzzle()">

			</image>
			<view class="line"></view>

			<image src="../../static/chuti.jpg" class="pazel-pic" @click="toAddPuzzle()">
			</image>
			<view class="blank"></view>
		</view>

		<!--我想解密 || 我想出题 end-->

		<!--热门谜题start-->
		<view class="hot-pazel pazel">

			<view class="pazel-title ">
				<image src="../../static/search.png" class="title-img"> </image>
				<view class="pazel-title-text">热门谜题</view>


			</view>
			<view class="pazel-hot-content">

				<ul v-model="hot_list">
					<li v-for="(item,index) in hot_list" v-if="index<9" :key="index"
						@click="gotoUrl(`/pages/pazel/guess?id=${item.id}`)">
						{{item.puzzleName}}
						<image v-if="index <3" src="../../static/hot.png" class="title-img after-text-img"></image>
					</li>
				</ul>
			</view>
			<view class="['more-pazel-button',{'top-change'}:hot_list.length % 2 ==0] " @touchstart="touch_link">
				更多热门谜题

			</view>

		</view>
		<!--热门谜题end-->



		<!--分类谜题start-->
		<view class="sortof-pazel pazel">
			<view class="pazel-title">
				<image src="../../static/search.png" class="title-img"> </image>
				<view class="pazel-title-text">分类谜题</view>


			</view>

			<view>
				<view class="pazel-hot-content">

					<ul v-model="hot_list">
						<li v-for="(item,index) in hot_list1" v-if="index<9" :key="index"
							@click="gotoUrl(`/pages/pazel/guess?id=${item.id}`)">
							{{item.puzzleName}}
							<image v-if="index < 3" src="../../static/hot.png" class="title-img after-text-img"></image>

						</li>
					</ul>
				</view>
				<view class="more-pazel-button">

					更多分类谜题

				</view>
			</view>

		</view>
		<!--分类谜题end-->
	</view>


</template>

<script>
	import {
		getPuzzleByMsg,
		showMoreHotPuzzle, //展示更多热门谜题
		showActivity, //展示轮播图
	} from '@/config/api.js'

	import {
		gotoUrl,
	} from "@/utils.js"

	export default {

		data() {




			return {
				gotoUrl,

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

				//搜索框
				searchValue: '',

				//热门榜单
				hot_list: [{
					name: 'photo',
					desc: '锁舒服舒服',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}],
				hot_list1: [{
					name: 'photo',
					desc: '锁舒服舒服',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}],
				activityShow: [], //轮播图
			}
		},

		created() {
			this.getMoreHotK() //展示更多分类谜题
			this.getMoreHotP() //展示更多热门谜题
			this.getActivity() //展示轮播图
		},

		methods: {

			async getActivity() {
				const res = await showActivity(2)
				console.log(JSON.stringify(res))
				this.activityShow = JSON.parse(JSON.stringify(res))
			},

			//展示更多热门谜题
			async getMoreHotK() {
				const res = await showMoreHotPuzzle()
				console.log(JSON.stringify(res))
				this.hot_list = JSON.parse(JSON.stringify(res))

			},

			//展示更多分类谜题
			async getMoreHotP() {
				const res = await getPuzzleByMsg({
					star: 1
				})
				console.log(JSON.stringify(res))
				this.hot_list1 = JSON.parse(JSON.stringify(res))

			},
			//跳转到 我要答题的页面
			toSolvePuzzle() {
				uni.navigateTo({
					url: '/pages/toSolvePuzzle/toSolvePuzzle'
				});
			},
			//跳转到 我要出题的页面
			toAddPuzzle() {

				console.log("id=" + this.$store.state.userInfo.id)
				const id = this.$store.state.userInfo.id
				uni.navigateTo({
					url: '/pages/produce_pazel/produce_pazel?id=' + id,
				});
			},



			//搜索start
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})

				uni.request({
					url: '/mock/test', // mock地址
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},

			focus(e) {

			},
			cancel(res) {

			},
			//搜索end



		},



	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: rgb(243, 242, 238);
		height: 100%;
		width: 100%;
		// background-image: url('https://sprtlias.oss-cn-hangzhou.aliyuncs.com/3f7c9465-b171-4a17-81a5-39760a28e4da.png');
		overflow-y: auto;
	}

	.top-change {
		top: 370rpx;
		z-index: 1;
	}

	.more-pazel-button:active {
		color: coral
	}

	.body-main {
		background-color: #F5F5F5;
	}

	.pazel {
		position: relative;
		background-color: white;
		width: 95%;
		margin: 0 auto 0.5rem;
		border-radius: 1rem;

	}

	.more-pazel-button {
		position: absolute;
		right: 40rpx;
		color: darkorange;
		font-weight: bold;
		top: 10px;
	}

	.after-text-img {
		opacity: 0.3;
		position: absolute;
		left: 250rpx;
		top: -15rpx;
	}

	.pazel-hot-content {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	li {
		position: relative;
		border-radius: 15%;
		box-sizing: border-box;
		margin-left: 40rpx;
		margin-top: 10rpx;
		width: 43%;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 10rpx;
		float: left;
		background-color: white;

	}

	.pazel-title-text {
		margin-top: 20rpx;
		width: 80%;
		padding-left: 20rpx;
		float: left;
		padding-bottom: 10px;
	}

	.title-img {
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 50rpx;
		height: 50rpx;
		float: left;
	}

	.gray {
		background-color: #F5F5F5;
	}

	.blank {
		width: 5%;
	}

	.pazel-get-set {
		box-sizing: border-box;
		padding: 10rpx;
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		border-radius: 5px;
		transition: background-color 0.3s;
		/* 添加过渡效果 */
	}

	.pazel-pic:active {
		transform: translateX(1rpx);
		transform: translateY(1rpx);
		transform: scaleX(1.05)
	}

	.pazel-pic {


		width: 43%;
		height: 100%;

	}

	.line {
		border: 1rpx lightgray solid;
		width: 1rpx;
		height: 80%;
		align-items: center;
		margin: auto;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 320rpx;
		margin-bottom: 20rpx;
	}

	.swiper-item {
		display: block;
		height: 400rpx;

		text-align: center;
		width: 90%;
		margin: auto;
		object-fit: fill;
		/* 使用 cover 属性让图片充满整个容器，保持原始比例并填充整个框 */
		background-position: center;
		background-size: contain;
		margin-top: -70rpx;

		image {
			background-size: contain;
			width: 100%;
			height: 100%;
			object-fit: fill;
			/* 让图像完全显示在容器中并保持原始比例 */
		}
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}




	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>